<template>
  <div class="screen-container">
    <header class="screen-header">
      <div>
        <img src="@/../public/static/img/header_border_dark.png" alt="" />
      </div>
      <span class="logo">
        <img src="../../public/static/img/logo_dark.png" alt="" />
      </span>
      <span class="title">电商平台实时监控系统</span>
      <div class="title-right">
        <img src="../../public/static/img/qiehuan_dark.png" class="qiehuan" />
        <span class="datetime">2049-01-01 00:00:00</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top">
          <!-- 销量趋势图 -->
          <trend></trend>
        </div>
        <div id="left-bottom">
          <!-- 商家销售金额图表 -->
          <seller></seller>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top">
          <!-- 商家分布图表 -->
          <Map></Map>
        </div>
        <div id="middle-bottom">
          <!-- 地区销量排行图表 -->
          <rank></rank>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top">
          <!-- 热销商品占比图表 -->
          <hot></hot>
        </div>
        <div id="right-bottom">
          <!-- 库存销量分析图表 -->
          <stock></stock>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import Hot from "@/components/Hot";
import Map from "@/components/Map";
import Rank from "@/components/Rank";
import Seller from "@/components/Seller";
import Trend from "@/components/Trend";
import Stock from "@/components/Stock";

export default {
  components: {
    hot: Hot,
    Map,
    rank: Rank,
    seller: Seller,
    trend: Trend,
    stock:Stock
  },
};
</script>

<style lang="less" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 2rem;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 5rem;
  font-size: 5rem;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 2rem;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 2.8rem;
    height: 2.1rem;
    cursor: pointer;
  }
  .datetime {
    font-size: 1.5rem;
    margin-left: 1rem;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      margin: 8rem 0 0 0;
      height: 3.5rem;
      width: 12.8rem;
    }
  }
}
// 图标区域
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 1rem;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
      // border: 1px solid red;
    }
    #left-bottom {
      height: 31%;
      margin-top: 1.5rem;
      position: relative;
      // border: 1px solid red;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 53%;
      position: relative;
      // border: 1px solid red;
    }
    #middle-bottom {
      margin-top: 1.5rem;
      width: 100%;
      height: 31%;
      position: relative;
      // border: 1px solid red;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 53%;
      position: relative;
      // border: 1px solid red;
    }
    #right-bottom {
      height: 31%;
      margin-top: 1.5rem;
      position: relative;
      // border: 1px solid red;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
